<template>
  <div id="app">
    <Layout>
      <router-view v-slot="{ Component, route }">
        <transition
          :name="currentTransition"
          mode="out-in"
          @enter="onPageEnter"
          @after-enter="onAfterEnter"
        >
          <component :is="Component" :key="route.path" />
        </transition>
      </router-view>
    </Layout>
  </div>
</template>

<script>
import { ref, watch, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import Layout from './components/Layout.vue'

export default {
  name: 'App',
  components: {
    Layout
  },
  setup() {
    const router = useRouter()
    const currentTransition = ref('fade')
    
    // 监听路由变化，根据meta信息设置动画类型
    watch(() => router.currentRoute.value, (to, from) => {
      if (to.meta?.transition) {
        currentTransition.value = to.meta.transition
      } else {
        currentTransition.value = 'fade'
      }
    }, { immediate: true })
    
    const onPageEnter = (el) => {
      // 页面进入动画开始
      console.log('页面进入动画开始')
    }
    
    const onAfterEnter = (el) => {
      // 页面进入动画完成后，触发交错式动画
      nextTick(() => {
        const staggerItems = el.querySelectorAll('.stagger-item')
        staggerItems.forEach((item, index) => {
          // 为每个元素设置不同的延迟时间
          item.style.animationDelay = `${index * 0.1}s`
          item.classList.add('stagger-animate')
        })
      })
    }
    
    return {
      currentTransition,
      onPageEnter,
      onAfterEnter
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
}

#app {
  min-height: 100vh;
}

/* 基础过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 滑动动画 */
.slide-enter-active {
  transition: all 0.4s ease-out;
}

.slide-leave-active {
  transition: all 0.3s ease-in;
}

.slide-enter-from {
  opacity: 0;
  transform: translateX(30px);
}

.slide-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}

/* 缩放动画 */
.scale-enter-active {
  transition: all 0.4s ease-out;
}

.scale-leave-active {
  transition: all 0.3s ease-in;
}

.scale-enter-from {
  opacity: 0;
  transform: scale(0.9);
}

.scale-leave-to {
  opacity: 0;
  transform: scale(1.1);
}

/* 交错式动画 */
.stagger-enter-active {
  transition: all 0.5s ease-out;
}

.stagger-leave-active {
  transition: all 0.3s ease-in;
}

.stagger-enter-from {
  opacity: 0;
  transform: translateY(20px);
}

.stagger-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

/* 交错式动画的子元素效果 */
.stagger-item {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease-out;
}

.stagger-item.stagger-animate {
  opacity: 1;
  transform: translateY(0);
}

/* 为不同元素设置不同的延迟时间 */
.stagger-item:nth-child(1) { transition-delay: 0.1s; }
.stagger-item:nth-child(2) { transition-delay: 0.2s; }
.stagger-item:nth-child(3) { transition-delay: 0.3s; }
.stagger-item:nth-child(4) { transition-delay: 0.4s; }
.stagger-item:nth-child(5) { transition-delay: 0.5s; }
.stagger-item:nth-child(6) { transition-delay: 0.6s; }
.stagger-item:nth-child(7) { transition-delay: 0.7s; }
.stagger-item:nth-child(8) { transition-delay: 0.8s; }
.stagger-item:nth-child(9) { transition-delay: 0.9s; }
.stagger-item:nth-child(10) { transition-delay: 1.0s; }
</style>